<template>
  <div class="shop_qx">
		<div class="search-date">
			<div class="total">
				<span>
					今日销售额:
				</span>
				<span>
					¥{{totalAmont}}
				</span>
			</div>
			<div class="date">
				<datetime :value="date1" format="YYYY-MM-DD"  :start-date="startDate1" :end-date="endDate1" @on-change="handleDate1"></datetime>
				<div class="start_date">
						<img :src="arrow" alt="起始结束时间" style="width:40px;height:20px;">
						<span>起止时间</span>
				</div>
				<datetime  :value="date2" format="YYYY-MM-DD" :start-date="startDate2" :end-date="endDate2"  @on-change="handleDate2"></datetime>
				<x-button mini plain type="primary" @click.native="handleSearch">搜索</x-button>
			</div>
		</div>
		<div v-show="!isLoading && dataList">
			<div transition-mode="follow" v-for="(item,key) in dataList" :key="key">
					<div slot="content" class=" vux-1px-t">
							<div class="order_item" style="margin-bottom:.25rem;">
								<group>
									<cell :title="item.nickname" :inline-desc="item.createTime">
										<img slot="icon" :src="item.avatar" class="shop-img">
										<div slot="value">
												<span style="color:#2e9670;padding-right:15px;font-size:0.36rem;" v-if="item.cellphone">TEL:{{item.cellphone}}</span>
											<i class="icon-right"></i>
										</div>
									</cell>
								</group>
								<div class="order_info">
									<transition-group name="fade" tag="div">
										<div class="order_det_info" v-for="(i,key) in item.orderItems" :key="key"  v-show="!item.selected">
											<div class="det_info_name" >{{i.productName}}</div>
											<div class="det_info_num" >x{{i.quantity}}</div>
											<div class="det_info_num">￥{{i.price}}</div>
										</div>
									</transition-group>
									<div :class="{more_up:!item.selected,more_down:item.selected}" class="order_info_more iconfont" v-on:click="onCollapse(item)">{{item.selected?`还有${item.orderItems.length}个商品`:'收起商品'}}</div>
									<div class="order_item_total">
										<div class="total_mon">合计：￥{{item.totalPrice}}</div>
										<div class="total_det">
											<span style="color:red;padding-right:15px;font-size:0.36rem;" v-if="item.status ===0 ">订单未付款</span>
											<span style="color: #2e9670;padding-right:15px;font-size:0.36rem;" v-if="item.status ===1 ">订单已付款</span>
											<span style="color: #2e9670;padding-right:15px;font-size:0.36rem;" v-if="item.status ===2 ">订单已完成 </span>
										</div>
									</div>
								</div>
							</div>
					</div>
      </div>
		</div>
		<div class="order-empty" v-show="!isLoading && !dataList">
			<i class="icon-order" ></i>
			<div>
				<p>没有任何订单</p>
			</div>
		</div>
	</div>
</template>
<script>
import {Cell,Group,Datetime,XButton } from 'vux'
import {setStore,getStore,removeStore} from '@/config/mUtils'
import store from 'store/store'
// 重定向url 地址
import Vue from 'vue'
const mydate = new Date()
export default {
  components: {
		Cell,
		Group,
		Datetime,
		XButton
  },
  data () {
		return {
			checkAll: false,
			dataList: [],
			isLoading: false,
			totalAmont: '',
			arrow: require('@/assets/arrow.png'),
			date1: `${mydate.getFullYear()}-${mydate.getMonth()+1}-${mydate.getDate()}`,
			date2: `${mydate.getFullYear()}-${mydate.getMonth()+1}-${mydate.getDate()}`,
			startDate1:`${mydate.getFullYear()-2}-${mydate.getMonth()+1}-${mydate.getDate()}`,
			endDate1: `${mydate.getFullYear()+10}-${mydate.getMonth()+1}-${mydate.getDate()}`,
			startDate2:`${mydate.getFullYear()-2}-${mydate.getMonth()+1}-${mydate.getDate()}`,
			endDate2: `${mydate.getFullYear()+10}-${mydate.getMonth()+1}-${mydate.getDate()}`
		}
  },
	beforeRouteEnter(to,from,next){
		if(store.getters.getShopStatus === 0){
				Vue.$vux.toast.show({
					type: 'warn',
					text: '没有绑定,即将跳转到绑定页面',
					time: 2000
				})
				removeStore('shop')
				setTimeout(()=>{
					next({path:'/login'})
				},1000);
			}else if(store.getters.getShopStatus === 1){
				next()
		}	
		// if(getStore('shop')){
    //   if(JSON.parse(getStore('shop')).hasBind === 0){
		// 		Vue.$vux.toast.show({
		// 			type: 'warn',
		// 			text: '没有绑定,即将跳转到绑定页面',
		// 			time: 2000
		// 		})
		// 		removeStore('shop')
		// 		setTimeout(()=>{
		// 			next({path:'/login'})
		// 		},1000);
		// 	}else if(JSON.parse(getStore('shop')).hasBind === 1){
		// 		next()
		// 	}	
    // }else{
    //   Vue.$vux.toast.show({
		// 		type: 'warn',
		// 		text: '登入过期,重新登入',
		// 		time: 2000
    //   })
    //   setTimeout(()=>{
    //     next({path:'/login'})
    //   },1000);
    // }
  },
	created(){
		if(store.getters.getShopStatus === 1){
			this.initData(JSON.parse(getStore('shop')).shopId,JSON.parse(getStore('shop')).openId)
		}
	},
  methods:{
    	// 初始订单数据
		initData(id,openId){
			this.isLoading = true;
			// 获取订单数据
			this.$http.get(`merchat/shopId/${id}/openId/${openId}/list`)
				.then(({data})=>{
					if(data.status === '200'){
						this.dataList = data.data.orderList
						this.totalAmont = data.data.totalAmount
						this.isLoading = false;
					}
				}).catch(err=>{
					this.$vux.toast.show({
						type: 'warn',
						text: '获取订单信息失败',
						time: 2000
					})
				})
    },
		// 展开收起商品
		onCollapse (item) {
			if(typeof item.selected =='undefined'){//判断是否未定义，如果没点击过按钮是没有注册的，则需要先注册selected属性
				this.$set(item,"selected",true)//局部注册
			}else{
				item.selected = !item.selected
			}
		},
		handleDate1(val){
			// console.log(val)
			// let date = new Date(val).getTime()
			this.date1 = val
		},
		handleDate2(val){
			// console.log(val)
			// let date = new Date(val).getTime()
			this.date2 = val
		},
		handleSearch(){
			let date1 = Math.round(new Date(this.date1).getTime()/1000)
			let date2 = Math.round(new Date(this.date2).getTime()/1000)
			this.$http.get(`merchat/shopId/${JSON.parse(getStore('shop')).shopId}/openId/${JSON.parse(getStore('shop')).openId}/list?startDate=${date1}&endDate=${date2}`)
				.then(({data})=>{
					if(data.status === '200'){
						if(data.data.orderList.length === 0){
							this.$vux.toast.show({
								type: 'success',
								text: '没有订单数据',
								time: 2000
							})
						}else{
							this.$vux.toast.show({
								type: 'success',
								text: data.msg,
								time: 2000
							})
							this.dataList = data.data.orderList
							this.totalAmont = data.data.totalAmont
						}
					}
				}).catch(err=>{
					this.$vux.toast.show({
						type: 'warn',
						text: '只能搜索三个月以内的订单',
						time: 2000
					})
				})
		}
  }
}
</script>
<style scoped>
.search-date .total{
	display: flex;
	flex-direction: row;
	-webkit-flex-direction: row;
	-moz-flex-direction: row;
	flex-wrap: nowrap;
	-webkit-flex-wrap: nowrap;
	-moz-flex-wrap: nowrap;
	justify-content: space-between;
	-webkit-justify-content: space-between;
	-moz-justify-content: space-between;
	align-items: center;
	-webkit-align-items: center;
	-moz-align-items: center;
}
.search-date .total span:first-child{
	font-size: 16px;
	color: #000;
	padding: .46rem;
}
.search-date .total span:last-child{
	font-size: 16px;
	color: #2e9670;
	padding: .46rem;
}
/*订单时间*/
.search-date .date{
	display: flex;
	flex-direction: row;
	-webkit-flex-direction: row;
	-moz-flex-direction: row;
	flex-wrap: nowrap;
	-webkit-flex-wrap: nowrap;
	-moz-flex-wrap: nowrap;
	font-size: 12px;
	padding: .2rem .46rem;
	align-items: center;
	-webkit-align-items: center;
	-moz-align-items: center;
}
.search-date .date a.vux-datetime{
	border: 1px solid #999;
	border-radius: 4px;
	padding: .2rem;
}
.start_date{
	display: inline-flex;
	flex-direction: column;
	-webkit-flex-direction: column;
	-moz-flex-direction: column;
	padding: .1rem;
}
/* 订单为空 */
.order-empty{
	display: flex;
	flex-direction: column;
	align-items: center;
	align-content: center;
	-webkit-flex-direction: column;
	-webkit-align-items: center;
	-webkit-align-content: center;
	-moz-flex-direction: column;
	-moz-align-items: center;
	-moz-align-content: center;
	padding: 2.5rem 0rem;
}
.order-empty i{
	margin-bottom: .46rem;
}
.order-empty i::before{
	font-size: 1.125rem;
	padding: 1rem;
	display: inline-block;
	background-color: #e5e5e5;
	color: #fff;
	border: 1px solid transparent;
	border-radius: 50%;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
}
.order-empty p{
	font-size: .46rem;
	color: #aaaaaa;
}
.icon-right{
	content: " ";
  display: inline-block;
  height: 6px;
  width: 6px;
  border-width: 2px 2px 0 0;
  border-color: #c8c8cd;
  border-style: solid;
  -webkit-transform: matrix(.71,.71,-.71,.71,0,0);
  transform: matrix(.71,.71,-.71,.71,0,0);
  position: absolute;
  top: 50%;
  margin-top: -4px;
  right: 15px
}
.shop-img{
	width: 1.2rem;
	height: 1.2rem;
	margin-right: .46rem;
	border-radius: 50%;
	border: 2px solid #eee;
}
.btn-red{
	border-color: red;
	color: red;
}

/*过渡效果*/ 
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
	-webkit-transition: opacity .5s
}
.fade-enter, .fade-leave-to /* .fade-leave-active in below version 2.1.8 */ {
  opacity: 0
}
.order_item{
	width: 100%;
	background-color: #fff;

}
/*全选*/
.check-all{
	display: flex;
	flex-direction: row;
	-webkit-flex-direction: row;
	-moz-flex-direction: row;
	flex-wrap: nowrap;
	-webkit-flex-wrap: nowrap;
	-moz-flex-wrap: nowrap;
	justify-content: flex-start;
	-webkit-justify-content: flex-start;
	-moz-justify-content: flex-start;
} 
.store_info{
	display: -webkit-box;
	-webkit-box-align: center;
	font-size: 0.5rem;
	padding: 0.4rem 0;
	margin-left: 0.4rem;
	border-bottom: 1px solid #e5e5e5;
}
.store_info > .vux-checker-box{
	flex: 1;
	-webkit-flex: 1;
	-moz-flex: 1;
}
.nochoose:before{
	font-family: 'iconfont';
	content: "\c009";
	font-size: 0.8rem;
	color: #2e9670;
	margin-right: 0.26rem;
	padding-left: 0.1rem;
}
.choose:before{
  font-family: 'iconfont';
	content: "\b008";
	font-size: 0.8rem;
	color: #2e9670;
	margin-right: 0.26rem;
	padding-left: 0.1rem;
}
.store_name{
	-webkit-box-flex: 1;
	font-weight: 700;
	font-size: 0.46rem;
}
.comm_right:before{
  font-family: 'iconfont';
	content: "\c001";
	font-size: 0.7rem;
	margin-right: 0.28rem;
	color: #aaaaaa;
}
.order_det_info{
	display: -webkit-box;
    font-size: 0.48rem;
	padding-top: 0.5rem;
	padding-left: 0.3rem;
	margin-left: 0.4rem;
}
.det_info_name{
	-webkit-box-flex: 1;
}
.det_info_num{
	width: 2.3rem;
}
.order_info_more{
	text-align: center;
	font-size: 0.36rem;
	padding: 0.3rem 0 0.26rem 0;
	border-bottom: 1px solid #e5e5e5;
	color: #727272;
}
.order_item_total{
	display: -webkit-box;
	-webkit-box-align: center;
	padding: 0.42rem 0;
}
.ord_it_to_border{
		border-bottom: 0.3rem solid #f7f7f7;
}
.total_mon{
	-webkit-box-flex: 1;
	margin-left: 0.5rem;
	font-size: 0.5rem;
	font-weight: 700;
}
.total_det{
	margin-right: .5rem;
	color: #727272;
	font-size: 0.4rem;
}
.order_bottom{
	width: 100%;
	display: -webkit-box;
	position: fixed;
	bottom: 0;
	left: 0;
	-webkit-box-align: center;
	font-size: 0.5rem;
	background-color: #fff;
	padding-left: 0.4rem;
}
.order_mon{
	-webkit-box-flex: 1;
	text-align: end;
	margin-right: 0.4rem;
}
.order_account{
	width: 4.1rem;
	height: 1.56rem;
	background-color: #2e9670;
	color: #fff;
	display: -webkit-box;
	-webkit-box-align: center;
	-webkit-box-pack: center;
	font-size: 0.46rem;
}
.more_down:after{
  font-family: 'iconfont';
	content: "\c005";
	margin-left: 0.2rem;
	font-size: 0.5rem;
}
.more_up:after{
  font-family: 'iconfont';
	content: "\c006";
	margin-left: 0.2rem;
	font-size: 0.5rem;
}
</style>
